<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    改变主轴和交叉轴的方向
    注意：交叉轴的start和end方向不会改变
    flex-direction: row(默认)
                    column;主轴改为垂直方向，交叉轴为水平方向
                    column-reverse;主轴改为垂直方向，并且反转主轴排列方向, start和end不变 
                    row-reverse;反转主轴默认排列方向，start和end不变
   -->
   <h2>flex-direction:column</h2>
   <style>
     .column{
       display: flex;
       height: 300px;
       border: 1px solid;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     .column div{
       width: 50px;
       height: 50px;
       border: 1px solid ;
       background-color: orange;
     }
   </style>
   <div class="column">
     <div>1</div>
     <div>2</div>
     <div>3</div>
   </div>



   <!--  column-reverse;主轴改为垂直方向，并且反转主轴排列方向, start和end不变 -->
   
   <h2>flex-direction:column-reverse</h2>
   <style>
     .column-reverse{
       display: flex;
       height: 300px;
       border: 1px solid;
       flex-direction: column;
       justify-content: start;
     }
     .column-reverse div{
       width: 50px;
       height: 50px;
       border: 1px solid ;
       background-color: orange;
     }
   </style>
   <div class="column-reverse">
     <div>1</div>
     <div>2</div>
     <div>3</div>
   </div>






   <!--  row-reverse;反转主轴默认排列方向，start和end不变 -->
   <h2>flex-direction:row-reverse</h2>
   <style>
     .row-reverse{
       display: flex;
       height: 300px;
       border: 1px solid;
       flex-direction: row-reverse;
       justify-content: start;
     }
     .row-reverse div{
       width: 50px;
       height: 50px;
       border: 1px solid ;
       background-color: orange;
     }
   </style>
   <div class="row-reverse">
     <div>1</div>
     <div>2</div>
     <div>3</div>
   </div>
</body>
</html>